<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 第二步，父组件对消息进行监听 -->
    <Son :title="myTitle" @changeTitle="handleChange"></Son>
  </div>
</template>

<script>
import Son from "./components/SonComponent.vue"
import SonComponent from "@/components/SonComponent.vue";
export default {
  name: "App",
  components: {
    Son,
  },
  data() {
    return {
      myTitle: "fxaandu",
    }
  },
  methods:{
    //第三步，提供处理函数，提供逻辑
    handleChange(newTitle) {
      this.myTitle = newTitle
    },
    components: {
      SonComponent
    }

  }
}
</script>

<style>
</style>